<template>
  <div class="top ft_PingFangSC">
    <div class="content">
      <p class="subTitle">市场监管</p>
      <ul class="from_ljgzxq_wrap">
        <li class="from_ljgzxq_li" v-for="(item,index) in ljgzxq" :key="item.plan">
          <div class="from_ljgzxq_span1">{{index+1}}</div>
          <div class="from_ljgzxq_span2">{{item.plan}}</div>
          <div class="number from_ljgzxq_span3">
            <!-- {{item.planNumber}} -->
            <countTo :endVal="item.planNumber" />
          </div>
          <div class="from_ljgzxq_span4">同比</div>
          <div
            class="from_ljgzxq_span5"
            :style="'color:'+(item.lifting ?'rgba(255,73,101,1)':'rgba(68,199,135,1)')"
          >{{item.lifting? "↑":"↓"}}</div>
          <div
            class="from_ljgzxq_span6 number"
            :style="'color:'+(item.lifting ?'rgba(255,73,101,1)':'rgba(68,199,135,1)')"
          >
            <!-- {{item.liftingNumber}} -->
            <countTo :endVal="item.liftingNumber" :decimals="2" />
          </div>
        </li>
      </ul>
    </div>
    <div class="content">
      <p class="subTitle">房屋征收</p>
      <div>
        <div class="left">
          <div class="content_left" v-for="(item,index) in data" :key="index">
            <div class="text">
              <p>{{item.name}}</p>
              <p>{{item.unit}}</p>
            </div>
            <div class="numbers dDigital_number">
              000000
              <div class="values">
                <!-- {{item.value}} -->
                <countTo :endVal="item.value" :separator="''" />
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="content_top">
            <p class="clearfix">
              征收地块签约进度
              <span>
                <span class="number">{{percent.toFixed(1)}}</span>%
              </span>
            </p>
            <CapsuleChart :value="percent+'%'" />
          </div>
          <div class="content_bottom">
            <div class="value_box">
              <div class="value">
                <p>已完成签约地块</p>
                <p>
                  <span class="number">{{ total*percent/100 }}</span>块
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CapsuleChart from "./capsuleChart";
export default {
  name: "RightTop",
  data: () => {
    return {
      data: [
        {
          name: "征收地块数量",
          unit: "(块)",
          value: 0
        },
        {
          name: "征收地块面积",
          unit: "(万m²)",
          value: 0
        },
        {
          name: "征收补偿金额",
          unit: "(万元)",
          value: 0
        }
      ],
      total: 0,
      percent: 0,
      ljgzxq: [
        {
          plan: "计划改造小区数（户）",
          planNumber: 23900,
          lifting: true,
          liftingNumber: 10.29
        },
        {
          plan: "实际完成改造小区数（户）",
          planNumber: 20150,
          lifting: true,
          liftingNumber: 10.29
        },
        {
          plan: "总建筑面积（万平方米）",
          planNumber: 160000,
          lifting: false,
          liftingNumber: 10.29
        },
        {
          plan: "预计投资总金额（万元）",
          planNumber: 980000,
          lifting: false,
          liftingNumber: 10.29
        }
      ]
    };
  },
  methods: {
    getData() {
      const _self = this;
      this.http
        .post("", {
          path: "st",
          groupid: 29
        })
        .then(res => {
          console.log(res);
        });
      this.http
        .post("", {
          path: "ov",
          groupid: 26
        })
        .then(res => {
          if (!(Object.getOwnPropertyNames(res.data) == 0 || res.data == "")) {
            const {
              fdc_fwzs_bcje,
              fdc_fwzs_dkmj,
              fdc_fwzs_dkqyjd,
              fdc_fwzs_dksl
            } = res.data;
            _self.data = [
              {
                name: "征收地块数量",
                unit: "(块)",
                value: fdc_fwzs_dksl
              },
              {
                name: "征收地块面积",
                unit: "(万m²)",
                value: fdc_fwzs_dkmj
              },
              {
                name: "征收补偿金额",
                unit: "(万元)",
                value: fdc_fwzs_bcje
              }
            ];
            _self.total = fdc_fwzs_dksl;
            _self.percent = fdc_fwzs_dkqyjd;
          }
        });
    }
  },
  mounted() {
    this.getData();
  },
  components: {
    CapsuleChart
  }
};
</script>

<style lang="scss" scoped>
.top {
  padding: 1.2rem 0;
  .content {
    .from_ljgzxq_wrap {
      width: 44.69rem;
      height: 17.15rem;
      background: rgba(0, 58, 155, 0.5);
      border: 1px solid #04a0fe;
      box-shadow: inset 0 1px 7px 0 #04a0fe;
      margin-left: 1.54rem;
      margin-top: 1rem;
      .from_ljgzxq_li {
        display: flex;
        height: 25%;
        width: 100%;
        border-bottom: 1px solid #0363b7;
        line-height: 4.31rem;
        font-family: DINAlternate-Bold;
        .from_ljgzxq_span1 {
          width: 5.38rem;
          text-align: center;
          font-size: 1.38rem;
          color: #fcb33a;
          letter-spacing: 0;
          text-align: center;
        }
        .from_ljgzxq_span2 {
          width: 14.77rem;
          font-size: 1.23rem;
          color: #bed7fa;
          letter-spacing: 0;
        }
        .from_ljgzxq_span3 {
          width: 6rem;
          font-size: 1.23rem;
          text-align: center;
          font-size: 1.84rem;
          color: #ffffff;
          letter-spacing: 0.1rem;
          margin-left: 3.54rem;
        }
        .from_ljgzxq_span4 {
          width: 2.46rem;
          text-align: center;
          color: #bed7fa;
          letter-spacing: 0;
          margin-left: 4.3rem;
          font-size: 1.23rem;
        }
        .from_ljgzxq_span5 {
          margin-left: 0.91rem;
        }
        .from_ljgzxq_span6 {
          width: 3rem;
          margin-left: 1rem;
        }
      }
    }
    &:last-of-type {
      margin-top: 2rem;
      > div {
        display: flex;
        .left {
          .content_left {
            width: 17.54rem;
            height: 5.31rem;
            background: url("../../../assets/background/estate/bg_Levy.png")
              no-repeat center;
            background-size: 100% 100%;
            margin-top: 1rem;
            margin-left: 4rem;
            display: flex;
            .text {
              width: 8rem;
              padding-top: 1rem;
              p {
                font-size: 1.077rem;
                color: #bed7fa;
                text-align: center;
                line-height: 1.5em;
              }
            }
            .numbers {
              position: relative;
              font-size: 2.46rem;
              letter-spacing: 0.0625em;
              margin-top: 2rem;
              margin-left: 0.5rem;
              color: rgba(116, 129, 142, 0.5);
              .values {
                width: 100%;
                text-align: right;
                position: absolute;
                top: 0;
                color: #fcb33a;
              }
            }
          }
        }
        .right {
          margin-left: 4rem;
          .content_top {
            font-size: 1.077rem;
            color: #bed7fa;
            margin-top: 1rem;
            p {
              margin-bottom: 1rem;
              > span {
                float: right;
              }
            }
            .number {
              font-size: 1.38rem;
              color: #fff;
            }
          }
          .content_bottom {
            position: relative;
            width: 16.69rem;
            height: 14rem;
            border-radius: 0.5rem;
            background: rgba(0, 58, 155, 0.1);
            box-shadow: inset 0 1px 28px 8px rgba(4, 160, 254, 0.6);
            border: 1px solid #90e2ff;
            transform: skewX(-10deg);
            margin-top: 1rem;
            // width:100px;
            // height:0;
            // border-width:0 2rem 13rem;
            // border-style:none solid solid;
            // border-color:transparent transparent rgb(0,58,155);
            .value_box {
              position: absolute;
              width: 100%;
              height: 75%;
              border-radius: 0.5rem;
              background: rgba(252, 179, 58, 0.1);
              border: 1px solid #fcb33a;
              box-shadow: inset 0 1px 28px 8px rgba(252, 179, 58, 0.4);
              bottom: 0;
              display: flex;
              align-items: center;
              .value {
                transform: skewX(10deg);
                font-size: 1.077rem;
                color: #bed7fa;
                line-height: 2em;
                text-align: center;
                flex: 1;
                .number {
                  margin-right: 1rem;
                  color: #fff;
                  font-size: 1.85rem;
                  letter-spacing: 0.0412em;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>